<template>
  <Pad class="articleDetail" v-if="data">
    <h1>{{data.newsName}}</h1>
    <h2 class="articleDetail-info">
      <span
        class="articleDetail-date"
      >{{ data.releaseTime }} {{ data.bloodStationId == 0 ? '平台资讯': '浆站资讯' }}</span>
      <span class="hot">
        <img src="../../assets/img/hot.png" />
        {{ data.shareFrequency }}
      </span>
      <span class="collect collected" v-if="data.collected" @click="cancel(data.id)">已收藏</span>
      <span class="collect" @click="collect(data.id)" v-else>收&nbsp;&nbsp;藏</span>
    </h2>
    <div v-html="data.news" class="content ql-editor"></div>
  </Pad>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Pad from "@/components/pad";
import { Toast } from "vant";
import { newsInfo, collectNews, cancelNews, shareNews } from "@/api/news";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      data: ""
    };
  },
  created() {
    const id = this.$route.params.id;
    const _this = this;
    shareNews({ id });
    newsInfo({ id }).then(({ data }) => {
      this.data = data;

      wx.ready(function() {
        wx.onMenuShareAppMessage({
          title: data.newsName, // 分享标题
          desc: " ", // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: data.picture.picFilepath, // 分享图标
        });

        wx.onMenuShareTimeline({
          title: data.newsName, // 分享标题
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: data.picture.picFilepath, // 分享图标
        });
      });
    });
  },
  methods: {
    collect(id) {
      collectNews({ id })
        .then(res => {
          Toast.success("收藏文章成功");
          this.data.collected = true;
        })
        .catch(err => {
          Toast.fail("收藏文章失败");
        });
    },
    cancel(id) {
      cancelNews({ id })
        .then(res => {
          Toast.success("已取消收藏文章");
          this.data.collected = false;
        })
        .catch(err => {
          Toast.fail("取消收藏文章失败");
        });
    }
  },
  components: {
    Pad
  }
};
</script>

<style lang='scss'>
.articleDetail {
  background: #fff;
  h1 {
    font-size: .373333rem /* 28/75 */;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 0.6rem /* 45/75 */;
    margin-bottom: .533333rem /* 40/75 */;
  }
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-date {
    font-size: 0.32rem /* 24/75 */;
    font-weight: 400;
    color: rgba(191, 191, 191, 1);
  }
  .hot {
    color: #f1404b;
    font-size: 0.32rem /* 24/75 */;
    display: flex;
    align-items: center;
    line-height: 1;
    img {
      width: 0.4rem /* 30/75 */;
      margin-right: 0.133333rem /* 10/75 */;
    }
  }
  .collect {
    width: 1.546667rem /* 116/75 */;
    height: 0.64rem /* 48/75 */;
    color: #4482ff;
    border: 1px solid #4482ff;
    text-align: center;
    line-height: 0.64rem /* 48/75 */;
    border-radius: 0.053333rem /* 4/75 */;
  }
  .collected {
    color: #fff;
    background-color: #4482ff;
  }
  .content {
    p,
    strong {
      // font-size: 0.32rem !important; /* 24/75 */
      // line-height: 0.8rem !important; /* 60/75 */
      
    }
    p {
      margin-bottom: 0.133333rem !important; /* 10/75 */
    }

    img {
      max-width: 100% !important;
    }
  }
}
</style>
